<pac-color-input class="w-full" [label]=" 'PAC.Story.Color' | translate: {Default: 'Color'} "
    [formControl]="color" [default]="'inherit'">
</pac-color-input>

<ngm-slider-input class="w-full"
    [label]=" 'PAC.Story.FontSize' | translate: {Default: 'Font Size'} "
    [formControl]="fontSize" [min]="0" [max]="60">
</ngm-slider-input>

<ngm-slider-input class="w-full"
    [label]=" 'PAC.Story.LineHeight' | translate: {Default: 'Line Height'} "
    [formControl]="lineHeight" [min]="0" [max]="5" [step]="0.25"
/>

<div class="flex justify-start items-center gap-2 my-2">
    <label for="widget-background-color" class="w-1/3 shrink-0 block tracking-wide text-xs text-right">
        {{ 'PAC.Story.TextAlign' | translate: {Default: 'Text Align'} }}
    </label>

    <div class="w-2/3 flex justify-start items-center">
        <mat-button-toggle-group ngmAppearance="outline" displayDensity="compact" color="accent"
            [(ngModel)]="textAlign">
            <mat-button-toggle value="left">
                <mat-icon fontSet="material-icons-round" displayDensity="compact">format_align_left</mat-icon>
            </mat-button-toggle>
            <mat-button-toggle value="center">
                <mat-icon fontSet="material-icons-round" displayDensity="compact">format_align_center</mat-icon>
            </mat-button-toggle>
            <mat-button-toggle value="right">
                <mat-icon fontSet="material-icons-round" displayDensity="compact">format_align_right</mat-icon>
            </mat-button-toggle>
            <mat-button-toggle value="justify">
                <mat-icon fontSet="material-icons-round" displayDensity="compact">format_align_justify</mat-icon>
            </mat-button-toggle>
        </mat-button-toggle-group>
    </div>
    
</div>

<div class="flex justify-start items-center gap-2 my-2">
    <label for="widget-background-color" class="w-1/3 shrink-0 block tracking-wide text-xs text-right">
        {{ 'PAC.Story.FontWeight' | translate: {Default: 'Font Weight'} }}
    </label>

    <div class="w-2/3 flex justify-start items-center">
        <mat-select id="fontWeight" class="max-w-full p-2 overflow-hidden text-ellipsis bg-gray-100 border-0 text-gray-900 text-xs rounded-lg
            focus:ring-blue-500 focus:border-blue-500 block w-full dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
            [panelClass]="'ngm-select-panel ngm-density__compact'"
            [formControl]="fontWeight"
            placeholder="{{ 'PAC.Story.ChooseFontWeight' | translate: {Default: 'Choose a font weight'} }}"
        >
            <mat-option selected [value]="null">--</mat-option>
          @for (fWeight of fontWeights; track fWeight) {
            <mat-option [value]="fWeight">{{fWeight}}</mat-option>
          }
        </mat-select>
    </div>
</div>
<ngm-input class="w-full" 
    [label]=" 'PAC.Story.FontFamily' | translate: {Default: 'Font Family'} "
    [placeholder]=" 'font-family' "
    [formControl]="fontFamily"
    [options]="fontFamilyOptions"
    >
</ngm-input>

<ngm-input class="w-full" 
    [label]=" 'PAC.Story.TextShadow' | translate: {Default: 'Text Shadow'} "
    [placeholder]=" 'text-shadow' "
    [formControl]="textShadow">
</ngm-input>